<template>
  <div>
    <!-- 主题 -->
    <div id="Subject" class="flex">
      <div class="Title flex"><img src="@/assets/function/风车.png"> 主题</div>

      <div v-for="item in SubjectData" :key="item.id" class="SubjectOne flex">
        <div class="imgBox">
            <el-image :src="require('@/assets/default/subject/' + item.src)"   class="img" 
                  :preview-src-list="[require('@/assets/default/subject/' + item.src)]" />
            <div class="selected flex" v-if="item.name==Subject.name">
                    <font-awesome-icon  icon="circle-check" class="icon"/>
             </div>    
        </div>    
         <el-button class="lable flex" @click="SetSubject_(item)" :disabled="item.name==Subject.name">
          {{item.lable}}
        </el-button >
      </div>
    </div>



    <!-- 特效 -->
    <div id="Effect" class="flex">
        <div class="Title flex"> <img src="@/assets/function/风车.png">特效 </div>

        <el-switch
          @change="change"
           v-model="SnowState_"
           active-color="#13ce66"
           inactive-color="gray">
        </el-switch>

    </div>
  </div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex';
export default {
  name: "",
  computed:{
     ...mapState('Setting',['Subject','SubjectData','SnowState'])     //主题 哪几种主题  雪花特效状态
     
  },
  data() {
    return {
      SnowState_:false,

    };
  },
  created(){
      this.SnowState_= Boolean( this.SnowState == 1 )
  },
  methods: {
    ...mapMutations('Setting',['SETSUBJECT','SETFAMILY','SNOWON','SNOWDOWN','SETTINGDOWN']),  //设置主题 设置字体 雪花特效开关
     SetSubject_(item){
        this.$public.AddInform({content:item.lable,type:item.name,FAI:true,classify:'subject'})
        this.SETSUBJECT(item)
     },
     change(newValue){
        let label 
        let type
        if(newValue){
          this.SNOWON()
          label = '雪花特效已开启'
          type = 'success'
        }
       else {
          this.SNOWDOWN()
          label = '雪花特效已关闭'
          type = 'info'
       }
        this.$public.AddInform({content:label,type,classify:'snow'})
     }
  },

};
</script>
<style scoped lang='less'>
.font{
    font-size: 18px;
    font-weight: 600;
}
.selected{
    top: 0;left: 0;
    width: 100%;height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.5);

    .icon{
      color: white;
      width: 40%;
      height:40%;
    }
}
.Title{
    width: 100%;
    font-size: 20px;
    margin-bottom: 15px;
    justify-content: flex-start;
    flex-wrap: wrap;
     color: var(--fontColor);

    img{
        width: 25px;height: 25px;
        margin-right: 5px;
        animation: rotate 4s linear infinite;
    }
}
// 主题
#Subject {
  margin-top: 20px;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
  

  .SubjectOne {
    width: 30%;
    min-width: 200px;
    max-width: 500px;
    margin-left: 10px;  
    overflow: hidden;
    flex-wrap: wrap;
    overflow: hidden;
    position: relative;

    .imgBox{
      width: 100%;
      position: relative;
      border-radius: 5px;
      overflow: hidden;
      display: flex;

       .img{
          width: 100%;
          object-fit: cover;
          border-radius: 5px;
        }
    }


    .lable{
      height: 30px;
      margin: 10px 0;
      border-radius: 5px;
      background: var(--GeneralBackColor);
      color: white;
      padding: 5px 10px;
      box-sizing: content-box;
    }
  }
}


#Effect{
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-top: 10px;
}
</style>